<template>
  <view>
    <view class="form">
      <view class="content ">
        <view class="forget-bg">
          <view class="forget-card">
            <view class="forget-input forget-margin-b">
              <input type="text" placeholder="用户名" v-model="form.username" />
            </view>
            <view class="forget-input forget-margin-b">
              <input type="text" placeholder="密码" v-model="form.password" />
            </view>
            <view class="forget-input forget-margin-b">
              <input type="text" placeholder="昵称" v-model="form.nickname" />
            </view>
            <view class="forget-input forget-margin-b">
              <input type="number" placeholder="手机号" v-model="form.mobile" />
            </view>
            <view class="forget-input forget-margin-b">
              <input type="text" placeholder="Email" v-model="form.email" />
            </view>
          </view>
        </view>
        <view class="forget-btn">
          <button class="landing" type="primary" @click="submit">添加</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        nickname: "",
        mobile: "",
        email: ""
      }
    };
  },
  methods: {
    submit() {
      console.log("---------执行添加操作---------");
      uniCloud.callFunction({
        name: 'addUser',
        data: this.form,
        success: (e) => {
          console.log(e.result);
          uni.showToast({
            title: '添加成功',
            duration: 2000
          });
          setTimeout(function() {
            uni.navigateTo({
              url: '/pages/index/index'
            })
          }, 1000)
        },
      })
    }
  }
};
</script>

<style>
.verify-left {
  width: calc(100% - 260upx);
}
.verify-right {
  padding-left: 20upx;
}
.verify-btn {
  height: 80upx;
  line-height: 80upx;
  font-size: 28upx;
  width: 240upx;
  border-radius: 8upx;
  background: linear-gradient(left, #FF978D, #FFBB69);
}
.verify-left,
.verify-right {
  float: left;
}
.landing {
  height: 84upx;
  line-height: 84upx;
  border-radius: 44upx;
  font-size: 32upx;
  background: linear-gradient(left, #FF978D, #FFBB69);
}
.forget-btn {
  padding: 10upx 20upx;
  margin-top: 580upx;
}
.forget-input input {
  background: #F2F5F6;
  font-size: 28upx;
  padding: 10upx 25upx;
  height: 62upx;
  line-height: 62upx;
  border-radius: 8upx;
}
.forget-margin-b {
  margin-bottom: 25upx;
}
.forget-input {
  padding: 10upx 20upx;
  overflow: auto;
}
.forget-card {
  background: #fff;
  border-radius: 12upx;
  padding: 60upx 25upx;
  box-shadow: 0 6upx 18upx rgba(0, 0, 0, 0.12);
  position: relative;
  margin-top: 120upx;
}
.forget-bg {
  height: 260upx;
  padding: 25upx;
  background: linear-gradient(#FF978D, #FFBB69);
}
</style>